<template>
	<!--pages/container/logistics/logistics.wxml-->
<div class='container'>
  <div v-if="isShow">
    <div class='logistics-header'>
      <img src='../../../static/img/logistics.svg' class='icon-logistics' />
      <div class='logistics-company'>
        <div class='logistics-item'>
          <span class='title'>物流公司</span>
          <span class='name'>顺丰冷链</span>
        </div>
        <div class='logistics-item'>
          <span class='title'>物流单号</span>
          <span class='name'>8488423939939</span>
        </div>
      </div>
    </div>
    <div class='logistics-info'>
      <div class='header'>
        <span class='title'>订单跟踪</span>
      </div>
      <div class='list-container'>
        <div class='list-item'>
          <div class='time-line'>
            <div v-if="isSuccess">
            	<span class="icon-success"></span>
            </div>
            <div v-else>
              <div class='small-circle'></div>
            </div>
          </div>
          <div class='list-item-content'>
            <span class='item-state'>订单交易成功</span>
            <span class='item-date'>2018-01-20 19:18:32</span>
          </div>
        </div>
        <div class='list-item'>
          <div class='time-line'>
            <div>
              <div class='small-circle'></div>
            </div>
          </div>
          <div class='list-item-content'>
            <span class='item-state'>[厦门市]到达处理中心</span>
            <span class='item-date'>2018-01-20 19:18:32</span>
          </div>
        </div>
        <div class='list-item'>
          <div class='time-line'>
            <div>
              <div class='small-circle'></div>
            </div>
          </div>
          <div class='list-item-content'>
            <span class='item-state'>[厦门市]到达处理中心</span>
            <span class='item-date'>2018-01-20 19:18:32</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div v-else>
    <div class='no-logistics'>
      <img src='../../../static/img/no_logistics.svg' />
      <span>暂无物流信息</span>
    </div>
  </div>
</div>
</template>

<script>
	export default{
		data(){
			return{
				isShow:true,
				isSuccess:true
			}
		}
	}
</script>

<style scoped>
	/* pages/container/logistics/logistics.wxss */
	.container{
		margin: 90px 0 0;
	}
.logistics-header {
  display: flex;
  align-items: center;
  padding: 50px 40px;
  background-color: #fff;
}
.logistics-header .icon-logistics {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  margin-right: 40px;
}
.logistics-header .logistics-item {
  display: flex;
}
.logistics-header .title {
  font-size: 30px;
  color: #9b9b9b;
  margin-right: 30px;
}
.logistics-header .name {
  font-size: 30px;
  color: #4a4a4a;
}
.logistics-info .header {
  padding: 30px 40px;
  background-color: #F7F7F7;
}
.logistics-info .header .title {
  font-size: 40px;
  color: #4A4A4A;
}
.logistics-info .body {
  padding: 50px 40px;
}
.logistics-info .list-container {
  padding: 50px 40px;
}
.logistics-info .list-item {
  display: flex;
  position: relative;
}
.time-line {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  width: 40px;
  height: 100%;
  margin-right: 30px;
}
.logistics-info .list-item::after {
  position: absolute;
  left: 20px;
  content: "";
  width: 2px;
  height: 100%;
  background-color:  #E6E6E6;
  z-index: 30;
}
.logistics-info .list-item:last-child::after {
  background-color:  transparent;
}
.time-line .small-circle {
  position: relative;
  width: 10px;
  height: 10px;
  margin-top: 10px;
  border-radius: 50%;
  background-color: #D8D8D8;
  z-index: 40;
}
.time-line .small-circle::after {
  position: absolute;
  bottom: 10px;
  left: 5px;
  content: "";
  width: 2px;
  height: 20px;
  background-color: #E6E6E6;
  z-index: 49;
}
.logistics-info .list-item-content {
  display: flex;
  flex-direction: column;
  padding-bottom: 36px;
}
.logistics-info .list-item-content .item-state {
  font-size: 28px;
  color: #4A4A4A;
}
.logistics-info .list-item-content .item-date {
  font-size: 24px;
  color: #9b9b9b;
}
/* 无物流信息 */
.no-logistics {
  padding-top: 200px;
}
.no-logistics img {
  display: block;
  width: 200px;
  height: 256px;
  margin: 0 auto;
}
.no-logistics span {
  display: block;
  color: #67666b;
  font-size: 40px;
  text-align: center;
  margin: 70px 0;
}
.icon-success{
	display: inline-block;
	z-index: 99;
	vertical-align: top;
	width: 40px;
	height: 42px;
	background-image: url(http://47.98.119.130/test/yami/物流已收到.svg);
	background-size: 100% 100%;
}
</style>